<!-- 
折线图堆叠
 -->
<template>
	<mCharts :height="height" :options="chatOptions" />
</template>
<script>
export default {
	props: {
		height: {
			type: String,
			default: '100%'
		},
		options: {
			type: Object,
			default: () => ({})
		},
		xData: {
			type: Array
		},
		yData: {
			type: Array
		}
	},
	data() {
		return {
			
		}
	},
	computed: {
		chatOptions() {
			let options = {
				legend: {
			    data: ['Email', 'Union Ads', 'Video Ads']
			  },
			  grid: {
			    left: '10px',
			    right: '20px',
			    bottom: '10px',
			    top: '40px',
			    containLabel: true
			  },
			  tooltip: {
			  	show: true,
			  	trigger: 'axis'
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      name: 'Email',
			      type: 'line',
			      stack: 'Total',
			      data: [120, 132, 101, 134, 90, 230, 210]
			    },
			    {
			      name: 'Union Ads',
			      type: 'line',
			      stack: 'Total',
			      data: [220, 182, 191, 234, 290, 330, 310]
			    },
			    {
			      name: 'Video Ads',
			      type: 'line',
			      stack: 'Total',
			      data: [150, 232, 201, 154, 190, 330, 410]
			    }
			  ]
			}

			// 覆盖自定义配置
			options = Object.assign(options, this.options || {});

			// 根据判断是否绑定xData,yData决定是否使用默认数据
			if(this.xData && this.yData) {
				options.xAxis.data = this.xData;
				options.legend.data = this.yData.map(item => item.name);
				options.series = this.yData.map(item => {
					return {
						type: 'line',
						stack: 'Total',
						...item
					}
				})
			}
			return options;
		}
	}
}
</script>